<template>
    <div id="all">
    <input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style">
    <div id="allmap"></div>
    </div>
</template>
<script>
import {MP} from "@/utils/map"
   export default {
       data(){
           return {
               address_detail: null, //详细地址
               userlocation: {lng: "", lat: ""},
           }
       },
       mounted(){
           this.$nextTick(function () {
          	MP("Vj2P3KUgAPeGoWjkwGz6qEPerVxzasX8").then( BMap => {
            var th = this
            var map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(106.553, 29.569); // 创建点坐标
            map.centerAndZoom(point,15);
            map.enableScrollWheelZoom();
            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
              {"input" : "suggestId"
              ,"location" : map
            })
            var myValue
            ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
              var _value = e.item.value;
              myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
               this.address_detail = myValue
              setPlace();
            });
            function setPlace(){
              map.clearOverlays();    //清除地图上所有覆盖物
              function myFun(){
                th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(th.userlocation, 18);
                map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
                debugger;
                console.log(th.userlocation.lng);
                console.log(th.userlocation.lat);
              }
              debugger;
              var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
              });
              local.search(myValue);

			  //测试输出坐标（指的是输入框最后确定地点的经纬度）
				map.addEventListener("click",function(e){
                    debugger;
                    console.log(th.userlocation.lng);
                    console.log(th.userlocation.lat);
                    var geoc = new BMap.Geocoder();
                    var pt = e.point;
                    geoc.getLocation(pt,function(rs){
                        var addComp = rs.addressComponents;
                        th.address_detail = addComp.province+addComp.city+addComp.district;
                        alert(th.address_detail);
                    })
				})
            }
            })
          })
       },
   }
</script>
<style scoped>
   #allmap{
        width: 400px;
        height: 400px;
        font-family: "微软雅黑";
        border:1px solid green;
    }
</style>